<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>实时通话情况</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/jquery-labelauty.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/jscrollpane1.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/callTask/callDetail.css}"  media="all" />
</head>
<body>
<!--sip.js需要用到的-->
<audio id="remoteAudio"></audio>
<audio id="localAudio"muted></audio>

<!--铃声-->
<audio id="ringtone" loop th:src="@{/audio/sounds/incoming.mp3}" ></audio>
<audio id="outgoing" loop th:src="@{/audio/sounds/outgoing.ogg}" ></audio>

<div id="chat" >
    <div class="sidebar">
        <div class="callDeatil">
            <span  class="title">客户详情</span>
            <ul class="datalist">
                <li >
                    <span >客户姓名:</span>
                    <span id="customerName" th:text="${callVo?.customerName}"></span>
                </li>
                <li th:if="${commitTo != 8}">
                    <span >坐席号码:</span>
                    <span id="targetCallPhone" th:text="${callVo?.targetCallPhone}" ></span>
                </li>
                <li>
                    <span >客户号码:</span>
                    <span id="mainCallPhone" th:text="${callVo?.mainCallPhone}" ></span>
                </li>
                <li th:if="${commitTo != 8}">
                    <span >主显号码:</span>
                    <span id="showNumTxt"></span>
                </li>
                <li>
                    <span >外呼时间:</span>
                    <span th:text="${callTime}" id="callTime"></span>
                </li>
            </ul>


            <!--<table class="datalist"   border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td >客户姓名:</td>
                    <td class="valTd" th:text="${callVo?.customerName}"></td>
                </tr>
                <tr>
                    <td >坐席号码:</td>
                    <td class="valTd" th:text="${callVo?.targetCallPhone}"></td>
                </tr>
                <tr>
                    <td >客户号码:</td>
                    <td class="valTd" th:text="${callVo?.mainCallPhone}"></td>
                </tr>
                <tr>
                    <td >主显号码:</td>
                    <td id="showNumTxt" class="valTd"></td>
                </tr>
                <tr>
                    <td >外呼时间:</td>
                    <td class="valTd" th:text="${callTime}"></td>
                </tr>
            </table>-->
        </div>

        <div class="callStatus">
            <table class="datalist" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="text-align: center" ><div style="width: 50px">通话状态</div></td>
                    <td class="valTd" style="text-align: center"><div class="item-val" id="txResult">正在为您接入云呼</div></td>
                </tr>
            </table>
            <ul class="datalist">
                <li class="item">
                    <span >
                        <div class="statusDiv">
                            <div class="item-titel" id="connectTime">00:00:00</div>
                            <div class="item-val">通话时长</div>
                        </div>
                    </span>
                    <span>
                        <div class="statusDiv">
                            <div class="item-titel">0轮</div>
                            <div class="item-val">通话轮次</div>
                        </div>
                    </span>
                </li>
            </ul>
        </div>

        <div class="operationDiv" >
            <ul  class="floatUl" >
                <li>
                    <a id="callNext" class="layui-btn">下一条</a>
                </li>
                <li>
                    <a id="stopAutoCall" class="layui-btn stopAutoCall">暂停自动call</a>
                </li>
                <li>
                    <a id="reDial" class="layui-btn reDail">重拨</a>
                </li>
                <li>
                    <a id="interruptCall" class="layui-btn interruptCall">挂断</a>
                </li>

            </ul>
        </div>

        <div class="followDiv"  >
            <span class="title">跟进反馈</span>
            <div>
                <div style="float: left;text-align: center;">
                    <ul class="floatUl">
                        <th:block th:if="${customerFollowCategorys}">
                            <li  th:each="it:${customerFollowCategorys}">
                                <input type="radio" name="customerFollowCategory"   class="customerFollowCategoryRadio" th:data-labelauty="${it.desc}"  th:value="${it.value}"
                                       th:checked="${customerFollowCategory !=null ? #lists.contains(customerFollowCategory,#strings.toString(it.value)):'false'}">
                            </li>
                        </th:block>
                        <!--<li><input type="radio" name="radio" data-labelauty="A级(较强)" disabled></li>
                        <li><input type="radio" name="radio" data-labelauty="B级(一般)" disabled checked></li>
                        <li><input type="radio" name="radio" data-labelauty="C级(很少)" disabled></li>
                        <li><input type="radio" name="radio" data-labelauty="D级(需筛选)" disabled></li>
                        <li><input type="radio" name="radio" data-labelauty="E级(再跟进)" disabled></li>
                        <li><input type="radio" name="radio" data-labelauty="F级(无需跟进)" disabled></li>-->
                    </ul>
                </div>
            </div>
        </div>

        <div style="display: none;height: 70px"></div>
    </div>
    <div class="main">
        <div class="talk">
            <div class="talk_title">
                实时通话记录
            </div>
            <div class="talk_title">

            </div>
            <div class="talk_record">
                <div id="jp-container" class="jp-container" >

                    <!--
                     <div class="talk_recordboxme">
                         <div class="user"><img th:src="@{/images/15.jpg}" />王玉山</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>我的问题是：1+1真的等于2吗？不会是等于3吧</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>

                     <div class="talk_recordbox">
                         <div class="user"><img th:src="@{/images/11.jpg}" />刘韵</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>对方的回答是：在错误的情况下是可以等于3的</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>

                     <div class="talk_recordboxme">
                         <div class="user"><img th:src="@{/images/15.jpg}" />王玉山</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>我的问题是1+1可以等于1吗？</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>

                     <div class="talk_recordbox">
                         <div class="user"><img th:src="@{/images/11.jpg}" />刘韵</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>对方的回答：理论上是不可以的，现在中是可以的。1个男人+1个女人=1个家庭</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>

                     <div class="talk_recordboxme">
                         <div class="user"><img th:src="@{/images/15.jpg}" />王玉山</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>我的问题是：那这样说1+1到底等于几呢？</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>

                     <div class="talk_recordbox">
                         <div class="user"><img th:src="@{/images/11.jpg}" />刘韵</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>对方的回答是：可以等于任何数，你想等于几就等于几，你烦不烦啊！</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>

                     <div class="talk_recordboxme">
                         <div class="user" ><img th:src="@{/images/15.jpg}" />王玉山</div>
                         <div class="talk_recordtextbg">&nbsp;</div>
                         <div class="talk_recordtext">
                             <h3>我在思考！</h3>
                             &lt;!&ndash;<span class="talk_time">2014-09-15 15:06</span>&ndash;&gt;
                         </div>
                     </div>


                     <div class="talk_recordboxme" >
                         &lt;!&ndash;<div class="user" style="width: 100%;text-align: center;float: none"></div>&ndash;&gt;
                         <div class="talk_recordtext" style="width: 80%;text-align: center;float: none;margin: 0 auto;">
                             <h3>建议挽留话术：广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                                 广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                                 广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体</h3>
                         </div>
                        &lt;!&ndash; <div style="width: 80%;text-align: center;float: none;margin: 0 auto;">
                             <ul class="datalist">
                                 <li class="item">
                                 <span class="item-name">
                                     <a class="layui-btn layui-btn-normal" style="background-color: #CCCCCC"><i class="layui-icon">&#xe6c6;</i>有用</a>
                                 </span>
                                     <span class="item-val">
                                     <a class="layui-btn layui-btn-normal" style="background-color: #CCCCCC"><i class="layui-icon">&#xe6c5;</i>无用</a>
                                 </span>
                                 </li>
                             </ul>
                         </div>&ndash;&gt;
                     </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bottomDiv" >
    <button type="button" class="layui-btn"  id="closeWin"  style="width: 100px;margin-top: 7px;float: right;margin: 5px 5px;" >关闭窗体</button>
</div>

<div  class="layui-layer-content">
    <ul class="layer_notice layui-layer-wrap" style="display: none;text-align: center;">
        <li><span>实时通话记录</span></li>
        <li><span class="item-val" id="txResultMsg" style="font-weight:bold;color: white">正在为您接入云呼</span></li>
   <!--     <li><button type="button" class="layui-btn"  id="btnOk"  style="width: 100px;margin-top: 7px;float: right;margin: 5px 5px;" >确定</button></li>-->
    </ul>
</div>


<script type="text/javascript" th:inline="javascript">
    var freeswitchCallService=[[${freeswitchCallService}]];
    var freeswitchCall=[[${freeswitchCall}]];
    var callVo = [[${callVo}]];
    var callTask = [[${callTask}]];
    var cloudcallUrl = [[${cloudcallUrl}]];
    var taskId = [[${taskId}]];
    var setTargetCallPhone = [[${targetCallPhone}]];
    var setMainCallPhone = [[${mainCallPhone}]];
    var connectWsUrl = [[${connectWsUrl}]];
    var aiCall = [[${aiCall}]];
    var voiceCode = [[${voiceCode}]];
    var actionCodeBreak = [[${actionCodeBreak}]];
    var voiceText = [[${voiceText}]];
    const baseUrl = [[${#servletContext.contextPath}]];
    var errorMsg = [[${errorMsg}]];
    const fromPage = "callPage";
    const commitTo = [[${commitTo}]];
    console.log("commitTo=================="+ commitTo);
</script>

<script type="text/javascript"   th:src="@{/js/layui/layui.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/linkageCall/sipjs/freeswitchCallCustomer-ai.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/linkageCall/viewCallDetail.js(v=${new java.util.Date().getTime()})}"></script>
<script type="text/javascript"   th:src="@{/js/page/linkageCall/cloudCall.js(v=${new java.util.Date().getTime()})}"></script>
<script type="text/javascript"   th:src="@{/js/jquery-labelauty.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery.mousewheel.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery.jscrollpane.min.js}"></script>
<script type="text/javascript"   th:src="@{/js/scroll-startstop.events.jquery.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/utils.js}"></script>
<script>
    $(function(){
        $(':input').labelauty();
    });
</script>

</body>
</html>